var echarts;
$(document).ready(function () {
    require.config({
        baseUrl: ctx + '/resource/plugins/echarts4',
        paths: {
            echarts: 'echarts',
            roma: 'theme/roma',
        }
    });
    loadDiv();
});

//查询指标数量加载组件
function loadDiv(DATE_TYPE) {
    var divHtml = '<div class="row host_row2" id="">\
                        <div class="item host_row6_item1">\
                            <div class="title">\
                                <div class="icon"></div>\
                                <h3 class="kbpName"></h3>\
                            </div>\
                            <div class="test" style="margin-top:2px;margin-right:2px;width: 98%;height: 415px;" id="">\
                            </div>\
                        </div>\
                    </div>';
    $.ajax({
        // async: false,
        url: ctx + "/Top/targetsTopQuery",
        type: "post",
        data: {},
        success: function (data) {
            var list = JSON.parse(data);
            for (var i = 0; i < list.length; i++) {
                var kbpCode = list[i].KBP_CODE;
                var kbpName = list[i].KBP_NAME;
                var kpiName = list[i].KPI_NAME;
                var kpiId = list[i].KPI_CODE;
                var kpiIdG = kpiId.replace(/-/g, '');
                $('#itea').append(divHtml);
                $("div[class = 'row host_row2']:eq(" + i + ")").attr('id', kbpCode);
                $("h3[class = 'kbpName']:eq(" + i + ")").html(kbpName + "-" + kpiName + "-" + "TOP榜");
                $("div[class = 'test']:eq(" + i + ")").attr('id', kpiIdG);
                queryTargetsTop(DATE_TYPE, kpiIdG, kpiName, kpiId);
            }
        },
        error: function (textStatus) {
            console.log("error:" + textStatus.status);
        }
    });
}

// top排行
function queryTargetsTop(DATE_TYPE, kpiIdG, kpiName, kpiId) {
    // console.log(kpiId);
    require(
        [
            'echarts',
            'roma'
        ],
        function (ec) {
            echarts = ec;
            divId = echarts.init(document.getElementById(kpiIdG));
            $.ajax({
                // async: false,
                url: ctx + "/Top/queryGraph",
                type: "post",
                data: {DATE_TYPE: DATE_TYPE, kpiId: kpiId},
                success: function (data) {
                    var map = JSON.parse(data);
                    var list = map.list;
                    var listtwo = map.listtwo;
                    var listthree = map.listthree;
                    var xdata = [];
                    var ydata = [];
                    var ydata1 = [];
                    var ydata2 = [];
                    var x_value = [];
                    if (DATE_TYPE == "showYear") {
                        for (var i = 0; i < list.length; i++) {
                            x_value = list[i].CI_NAME;
                            xdata.push(x_value);
                            ydata.push(list[i].AVG_VALUE);
                            // ydata1.push(listtwo[i].AVG_VALUE);
                            // ydata2.push(listthree[i].AVG_VALUE);
                        }
                    } else if (DATE_TYPE == "showWeek") {
                        for (var i = 0; i < list.length; i++) {
                            x_value = list[i].CI_NAME;
                            xdata.push(x_value);
                            ydata.push(list[i].AVG_VALUE);
                            // ydata1.push(listtwo[i].AVG_VALUE);
                            // ydata2.push(listthree[i].AVG_VALUE);
                        }
                    } else if (DATE_TYPE == "showMonth") {
                        for (var i = 0; i < list.length; i++) {
                            x_value = list[i].CI_NAME;
                            xdata.push(x_value);
                            ydata.push(list[i].AVG_VALUE);
                            // ydata1.push(listtwo[i].AVG_VALUE);
                            // ydata2.push(listthree[i].AVG_VALUE);
                        }
                    } else {
                        for (var i = 0; i < list.length; i++) {
                            x_value = list[i].CI_NAME;
                            xdata.push(x_value);
                            ydata.push(list[i].AVG_VALUE);
                            // ydata1.push(listtwo[i].AVG_VALUE);
                            // ydata2.push(listthree[i].AVG_VALUE);
                        }
                    }
                    option = {
                        color: ['#3398DB'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        legend: {
                            formatter: function (series) {
                                return series;
                            },
                            textStyle: {
                                color: '#AAAAAA'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: xdata,
                                axisTick: {
                                    alignWithLabel: true
                                },
                                axisLabel: {
                                    interval: 0,
                                    formatter: function (value) {
                                        /*debugger*/
                                        var ret = "";//拼接加\n返回的类目项
                                        var maxLength = 6;//每项显示文字个数
                                        var valLength = value.length;//X轴类目项的文字个数
                                        var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                                        if (rowN > 1)//如果类目项的文字大于3,
                                        {
                                            for (var i = 0; i < rowN; i++) {
                                                var temp = "";//每次截取的字符串
                                                var start = i * maxLength;//开始截取的位置
                                                var end = start + maxLength;//结束截取的位置
                                                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                                temp = value.substring(start, end) + "\n";
                                                ret += temp; //凭借最终的字符串
                                            }
                                            return ret;
                                        }
                                        else {
                                            return value;
                                        }
                                    }
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                // max: 100,
                                splitLine: {
                                    show: true,
                                },
                                nameTextStyle: {
                                    color: '#000000',
                                },
                                axisLabel: {
                                    formatter: '{value} ',
                                    textStyle: {
                                        color: '#000000'
                                    }
                                }
                            },
                        ],
                        series: [
                            {
                                name: kpiName,
                                type: 'bar',
                                barWidth: '60%',
                                color: '#3398DB',
                                data: ydata
                            },
                            // {
                            //     name: '物理内存使用率',
                            //     type: 'bar',
                            //     barWidth: '25%',
                            //     color: '#54efae',
                            //     data: ydata1
                            //     // data: [5.12,4.75,0.68,0.65,0.26,0.11,0.04,0.03,0.03,0.03,0.03,0.03,0.02,0.02,0.02]
                            // },
                            // {
                            //     name: '文件系统使用率',
                            //     type: 'bar',
                            //     barWidth: '25%',
                            //     color: '#ef610f',
                            //     data: ydata2
                            //     // data: [5.12,4.75,0.68,0.65,0.26,0.11,0.04,0.03,0.03,0.03,0.03,0.03,0.02,0.02,0.02]
                            // }
                        ]
                    };
                    divId = echarts.init(document.getElementById(kpiIdG));
                    divId.setOption(option);
                }, error: function (textStatus) {
                    console.log("error:" + textStatus.status);
                }
            });
        }
    );
}

//按钮事件
$(".rad_1").click(function () {
    $('#itea').html('');
    var flag = $(this).attr('for');
    loadDiv(flag);
});
